import React, { Component } from 'react';
import './carItem.css';

class CarItem extends Component {
    render() {
        let {checked,num,title,price,pic} = this.props;
        return (
            <div className="car-item">
                <div>
                    <input type="checkbox" checked={checked} onChange={this.change}/>
                    <dl  className="car-info">
                        <dt>
                            <img src={pic} alt=""/>
                        </dt>
                        <dd>
                            <h6>{title}</h6>
                            <span>{price}</span>
                        </dd>
                    </dl>
                </div>

                <div>
                    <button onClick={() => this.changeNum('minus')}>-</button>
                    <span>{num}</span>
                    <button onClick={() => this.changeNum('plus')}>+</button>
                </div>
            </div>
        );
    }

    //修改数据
    changeNum = (type) => {
        //1.添加和减少  数量加减   2.调修改数量接口   3.重新获取数据

        let num = type === 'plus' ? this.props.num + 1 : this.props.num-1;

        //
        this.props.changeNum(this.props.id,num);


    }

    change = (e) => {
        console.log(e.target.checked)

        //id checked

        this.props.changeStatus(this.props.id,e.target.checked);
    }
}

export default CarItem;